import React, { useState } from 'react';
import {
  ClockCircleOutlined,
  DiffOutlined,
  Html5Outlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UnorderedListOutlined,
} from '@ant-design/icons';
import { Button, Layout, Menu, theme } from 'antd';
import './App.css'
import { Outlet, useNavigate } from 'react-router-dom';
import ComBreadcrumb from './components/ComBreadcrumb';



const { Header, Sider, Content } = Layout;
const App: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  // 根据当前路径设置默认选中的菜单项
  const path = location.pathname;
  const getSelectedKey = () => {
    if (path === '/list' || path === '/') return ['1'];
    if (path === '/add') return ['2'];
    if (path === '/history') return ['3'];
    if (path === '/create') return ['4'];
    return ['1'];
  };
  const navigate = useNavigate()

  // 处理菜单点击
  const handleMenuClick = (key: string) => {
    switch (key) {
      case '1':
        navigate('/list');
        break;
      case '2':
        navigate('/add');
        break;
      case '3':
        navigate('/history');
        break;
      case '4':
        navigate('/create');
        break;
      default:
        navigate('/')
        break;
    }
  };
  // 处理面包条
  const pathSplice = (path:string)=>{
    if(path === '/'){
      return 'Home'
    }else{
      return path.slice(1)
    }
  }

  return (
    <Layout>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="demo-logo-vertical">
          <Html5Outlined className='icon-size'/>
        </div>
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={getSelectedKey()}
          onClick={({key})=>handleMenuClick(key)}
          defaultSelectedKeys={['1']}
          items={[
            {
              key: '1',
              icon: <UnorderedListOutlined />,
              label: '列表',
            },
            {
              key: '2',
              icon: <DiffOutlined />,
              label: '添加付款单',
            },
            {
              key: '4',
              icon: <ClockCircleOutlined />,
              label: '创建付款单',
            },
            {
              key: '3',
              icon: <ClockCircleOutlined />,
              label: '历史付款单',
            },
            
          ]}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64,
            }}
          />
          <ComBreadcrumb path={pathSplice(location.pathname)}/>
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
            width:'98%',
            height:'100%',
            overflow:'auto'
          }}
        >
          <Outlet/>
        </Content>
      </Layout>
    </Layout>
  );
};

export default App;